<template>
    <div>
        <make-work-dialog :visible="makeWorkDialogVisible" :progress="postData" :workshops="workshops"
                          @callClosed="handleWorkDialogClosed" @callSaveSuccess="hanleSaveWorkSuccess"/>

        <edit-wok-info :visible="editWorkDialogVisible" :progress="postData" :workshops="workshops" :info="selected"
                       @callClosed="handleEditClosed" @callEditSuccess="handleEditSuccess"/>
        <div class="main-title">工作站</div>
        <el-form inline>
            <el-form-item label="工作站名称">
                <el-input v-model="queryData.name" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="所在车间">
                <el-select style="width: 150px" v-model="queryData.idWorkshop">
                    <el-option label="全部" :value=-1></el-option>
                    <template v-for="item in workshops">
                        <el-option :label="item.label" :value="item.value"></el-option>
                    </template>
                </el-select>
            </el-form-item>
            <el-form-item label="所在工序">
                <el-select style="width: 150px" v-model="queryData.idProgress">
                    <el-option label="全部" :value=-1></el-option>
                    <template v-for="item in postData">
                        <el-option :label="item.label" :value="item.value"></el-option>
                    </template>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleQuery">查询</el-button>
                <el-button @click="handleReset">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row>
            <el-button-group>
                <el-button type="primary" @click="handleAdd" plain>添加</el-button>
                <el-button :disabled="selections.length===0" type="danger" @click="handleDeleteMall" plain>删除
                </el-button>
                <el-button type="warning" @click="handleDownload" plain>导出</el-button>
            </el-button-group>
        </el-row>
        <el-table
                height="550"
                :data="tableData"
                @selection-change="handleSelecedChanged"
                style="width: 100%">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="工作站名称">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="工作站地点">
            </el-table-column>
            <el-table-column
                    label="所在车间">
                <template #default="scope">
                    <el-tag type="info">{{ scope.row.workShopName }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column

                    label="所属工序">
                <template #default="scope">
                    <el-tag type="info">{{ scope.row.progressName }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    label="是否启用">
                <template #default="scope">
                    <el-tag :type=" scope.row.status ===1 ? 'success' : 'danger'">
                        {{ scope.row.status === 1 ? '启用' : '禁用' }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="comments"
                    label="备注">
            </el-table-column>
            <el-table-column
                    label="操作">
                <template #default="scope">
                    <el-button-group>
                        <el-button type="primary" @click="handleUpdate(scope.row)" plain>修改</el-button>
                        <el-button type="danger" @click="handleDelete(scope.row)" plain>删除</el-button>
                    </el-button-group>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @change="handlePageChanged"
                :page-size="queryData.limit"
                layout="prev, pager, next"
                :total="total">
        </el-pagination>
    </div>
</template>

<script>
import progressAPI from "@/util/request-md/progress/progress.js";
import workshopAPI from "@/util/request-md/workshop/workshop.js";
import workAPI from "@/util/request-md/work/work.js";
import MakeWorkDialog from "@/components/widget/dialog/MakeWorkDialog.vue";
import EditWokInfo from "@/components/widget/dialog/EditWokInfo.vue";
import downloadAPI from "@/util/request-md/file/download.js";
import config from "@/util/config.js";

export default {
    name: 'work.vue',
    components: {EditWokInfo, MakeWorkDialog},
    data() {
        return {
            queryData: {
                name: '',
                idWorkshop: -1,
                idProgress: -1,
                page: 1,
                limit: 10
            },
            total: 0,
            editWorkDialogVisible: false,
            makeWorkDialogVisible: false,
            postData: [],
            tableData: [],
            workshops: [],
            selections: [],
            selected: {},
        }
    },
    methods: {
        handleUpdate(data) {
            this.selected = data;
            this.editWorkDialogVisible = true;
        },
        handleEditClosed() {
            this.editWorkDialogVisible = false
        },
        handleEditSuccess() {
            this.loadWorkData();
            this.editWorkDialogVisible = false;
        },
        hanleSaveWorkSuccess() {
            this.loadWorkData();
            this.makeWorkDialogVisible = false;
        },
        handleWorkDialogClosed() {
            this.makeWorkDialogVisible = false;
            // this.loadWorkData();
        },
        handlePageChanged(currentPage) {
            this.queryData.page = currentPage;
            this.loadWorkData();
        },
        handleDeleteMall() {
            var idWorks = [];
            this.selections.map(item => {
                idWorks.push(item.idWork);
            })
            workAPI.deleteWorks(idWorks, res => {
                if (res.code === 200) {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.loadWorkData();
                } else {
                    this.$message.error(`网络异常:${res.msg}`);
                }
            })
        },
        handleReset() {
            this.queryData = {
                name: '',
                idWorkshop: -1,
                idProgress: -1,
                page: 1,
                limit: 10
            };
            this.loadWorkData();
        },
        //加载工序数据
        loadPostData() {
            progressAPI.getProgress((res) => {
                if (res.code === 200) {
                    res.data.map(item => {
                        this.postData.push({
                            label: item.processName,
                            value: item.processId
                        })
                    })
                } else {
                    this.$message.error(`网络异常:${res.msg}`);
                }
            })
        },
        //加载车间数据
        loadWorkshopData() {
            this.workshops = [];
            workshopAPI.getMdWorkshops((res) => {
                if (res.code === 200) {
                    res.data.map(res => {
                        this.workshops.push({
                            label: res.name,
                            value: res.idWorkshop
                        })
                    })
                } else {
                    this.$message.error(`网络异常:${res.msg}`);
                }
            })
        },
        loadWorkData() {
            workAPI.getWorks(this.queryData, (res) => {
                if (res.code === 200) {
                    this.tableData = res.data;
                    console.log(this.tableData);
                } else {
                    this.$message.error(`网络异常:${res.msg}`);
                }
            })
            workAPI.getCount((res) => {
                if (res.code === 200) {
                    this.total = res.data;
                }
            })
        },
        handleQuery() {
            this.loadWorkData();
        },
        //添加工作站
        handleAdd() {
            this.makeWorkDialogVisible = true;
        },
        //删除工作站
        handleDelete(data) {
            this.$confirm('是否删除该工作站?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                workAPI.deleteWork({id: data.idWork}, res => {
                    if (res.code === 200) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.loadWorkData();
                    }
                })
            })
        },
        //多选事件
        handleSelecedChanged(data) {
            this.selections = data;
        },
        handleDownload(){
            //跳转外部链接
            window.open(config.mdUrl+"/download/work/allInfo");
        }
    },
    mounted() {
        this.loadPostData();
        this.loadWorkshopData();
        this.loadWorkData();

    }
}
</script>

<style></style>